<template>
    <!--login.bvue 登录 -->
    <div>
        <mu-appbar title="货车兄弟">
        </mu-appbar>
        <div id="loginContent">
            <mu-text-field
            v-model='userName'
            :label='userNameLabel'
            :errorText="userNameErrorText"
            required
            fullWidth
            labelFloat
            type="number"
            :hintText="userNameHintText"
            @textOverflow="handleUseNameOverflow"
            :maxLength="11"/>

            <br/>

            <mu-text-field
            :label="passwordLabel"
            v-model='password'
            :errorText="passwordErrorText"
            required
            :hintText="passwordHintText"
            type="password"
            @textOverflow="passwordErrorText"
            fullWidth
            labelFloat/>

       </div>

        <mu-raised-button
        :label="loginLabel"
        v-on:click="handleLoginMethod"
        class="login-raised-button"
        primary/>
    </div>
</template>


<style scoped>
 #loginContent{
     margin-left:1rem;
     margin-right:1rem;
 }
 .mu-text-field{
     padding-left:0.5rem;
     padding-right:0.5rem;
     text-align: left;
 }

 .login-raised-button {
    margin-top:1rem;
    width:12rem;
}

</style>


<script>
import login from '../assets/text/login.zh.json'
import request from '../api/http'
// import app from '../assets/text/app.json'
export default {
  data () {
    return {
      userName: '15108280907',
      userNameLabel: login.userNameLabel,
      passwordLabel: login.passwordLabel,
      loginLabel: login.loginLabel,
      userNameHintText: login.userNameHintText,
      passwordHintText: login.passwordHintText,
      password: '123456',
      userNameErrorText: '',
      passwordErrorText: ''
    }
  },
  computed: {

  },
  methods: {
    handleUseNameOverflow (isOverflow) {
      this.userNameErrorText = isOverflow ? login.userNamelimit : ''
    },
    handlePasswordOverflow (isOverflow) {
      this.passwordErrorText = isOverflow ? login.passwordLimit : ''
    },
    handleLoginMethod () {
      const param = JSON.stringify({
        userName: this.userName,
        password: this.password
      })
      const option = {
        mode: 'cors',
        method: 'post',
        credentials: 'omit',
        body: param
      }
      const body = function (data) {
        console.log(data)
      }
      request('http://test.dadachefu.com/truck/userWorker/login', option, body)
      console.log(this.userName)
    }
  }
}
</script>
